<template>
	<view class="container">
		<!-- 视图 -->
		<view class="charts-box">
		    <qiun-data-charts
		      type="gauge"
		      :opts="opts"
		      :chartData="chartData"
		    />
		  </view>
		<!-- 标题内容区 -->
		<view class="info_card">
			<title-component titleName="钱包地址" :isShowMore="false" :isShowBtn="false" ></title-component>
			<view class="info_detail">
				<view class="wallent_location">
					<span class="info">{{userinfo.walletAddress}}</span>
					<span class="icon" @click="copyContract">
						<image style="width: 20px;height: 20px;" src="../../static/img/nft/copy.png"></image>
					</span>
				</view>
			</view>
			<title-component titleName="火源价格" :isShowMore="false" :isShowBtn="false" ></title-component>
		</view>
		<view class="line_view">
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData2" background="none" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#fe7c24","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: undefined,
					title: {
					  name: "",
					  fontSize: 25,
					  color: "#fe7c24",
					  offsetY: 0
					},
					subtitle: {
					  name: "token持有量",
					  fontSize: 15,
					  color: "#fe7c24",
					  offsetY: 0
					},
					extra: {
					  gauge: {
						type: "progress",
						width: 20,
						labelColor: "#666666",
						startAngle: 0.75,
						endAngle: 0.25,
						startNumber: 0,
						endNumber: 100,
						labelFormat: "",
						splitLine: {
						  fixRadius: -10,
						  splitNumber: 10,
						  width: 15,
						  color: "#FFFFFF",
						  childNumber: 5,
						  childWidth: 12
						},
						pointer: {
						  width: 24,
						  color: "auto"
						}
					  }
					}
				},
				isShow: false,
				userinfo: {
					walletAddress:''
				},
				customerNo: '',
				chartData2: {
					"categories": [
						"2022",
						"2023",
						"2024",
						"2025",
						"2026",
						"2027"
					],
					"series": [
						{
							"name": "火源价格",
							"data": [
								1,
								3,
								6,
								30,
								44,
								68
							]
						},
					]
				}
			}
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
		},
		onReady() {
		    this.getServerData();
			this.getCustomerWalletInfo()
		  },
		async onShow() {
			var customerTokenInfoTemp = uni.getStorageSync('customerTokenInfo')
			console.log(customerTokenInfoTemp.balancce)
			this.opts.title.name = customerTokenInfoTemp.balance + ""
		},
		methods: {
			getServerData() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: [{"value":0.2,"color":"#fff"},{"value":0.8,"color":"#2fc25b"},{"value":1,"color":"#f04864"}],
					series: [
					  {
						name: "完成率",
						data: 0.66
					  }
					]
				  };
				this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
			copyContract() {
				uni.setClipboardData({
					data: this.userinfo.walletAddress,
					success: function () {
						console.log('success');
					},
				});
			},
			getCustomerWalletInfo(){
				getWalletInfo({
					customerNo: this.customerNo
				}).then(res => {
					if (res)
						// 更新余额缓存
						this.userinfo.walletAddress = res?.data?.DampCustomerBase?.walletAddress
				})
			}
		}
	}
</script>

<style lang="scss">
	.charts_box {
		width: 100%;
		height: 280px;
		padding-top: 80rpx;
	}

	.line_view {
		padding-right: 30rpx;
		padding-top: 40rpx;
	}

	.info_card {

		.info_detail {
			background-color: #fff;
			padding: 2rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			.wallent_location {
				margin-top: 12rpx;
				.info {
					width: 90%;
					/*1.强制不换行*/
					white-space: nowrap;
					/*2.溢出隐藏*/
					overflow: hidden;
					/*3.超出部分用省略号表示*/
					text-overflow: ellipsis;
				}
				span {
					display: inline-block;
				}
			}
		}
	}
</style>
